<template>
  <el-form :inline="true" class="search-form">
    <slot name="before"></slot>

    <el-form-item label="搜索内容">
      <el-input clearable v-model.trim="searchCond.storeName" placeholder="输入姓名、手机号后4位"></el-input>
    </el-form-item>

    <el-form-item label="商户">
      <el-select v-model="searchCond.merchantId" filterable clearable>
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in merchantOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="订单状态">
      <el-select v-model="searchCond.state" filterable clearable>
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in orderStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <div class='time-box'>
      <el-form-item label="付款时间">
        <el-date-picker v-model="searchCond.timeBegin" placeholder="开始时间" type="datetime" value-format='YYYY-MM-DD HH:mm'
          format='YYYY-MM-DD HH:mm' />
      </el-form-item>
      <el-form-item label="-" class='end-time'>
        <el-date-picker v-model="searchCond.timeEnd" placeholder="截止时间" type="datetime" value-format='YYYY-MM-DD HH:mm'
          format='YYYY-MM-DD HH:mm' />
      </el-form-item>
    </div>

    <div class='search-btn-block'>
      <hz-button type="primary" @click="clickQuery">查询</hz-button>
      <hz-button type="primary" @click="resetSearchCond">重置</hz-button>
      <slot name="afterButton"></slot>
    </div>
    <slot name="after"></slot>

  </el-form>
</template>
<script setup>
import { ref, getCurrentInstance, reactive } from "vue";
import { orderStatus } from "@/plugin/dict";
import { moment } from "@/plugin/util";
import { useStore } from "vuex";

const { proxy } = getCurrentInstance();
const store = useStore();
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["searchClick", "resetSearchCond", "clickQuery"]);
const merchantOption = ref([]);

// 搜素条件
const searchCond = reactive({
  timeBegin: moment().subtract(36, 'days').format('YYYY-MM-DD') + ' 19:00',
  timeEnd: moment().subtract(32, 'days').format('YYYY-MM-DD') + ' 12:00',
  // timeEnd: moment().format('YYYY-MM-DD') + ' 12:00',
  storeName: "",
  state: "",
  merchantId: "",
});

getMerchantDict();
/* ---------methods--------- */

function getMerchantDict() {
  let data = 'HC_MERCHANT,STORE_NAME,ID,DEL_FLAG=0'
  proxy.$http.get('/sys/dict/getDictItems/' + data).then(res => {
    if (res.code == 0) {
      merchantOption.value = res.result.map(val => {
        return {
          value: val.value,
          label: val.label,
        }
      })
    }
  })

}

// 重置条件
function resetSearchCond() {
  Object.keys(searchCond).forEach((key) => {
    searchCond[key] = "";
  });
  emits("resetSearchCond");
}

// 查询
function clickQuery() {
  emits('clickQuery', { ...searchCond })
}

function getSearchCond() {
  return { ...searchCond }
}

// 对外暴露数据
defineExpose({
  getSearchCond: getSearchCond,
  clickQuery: clickQuery,
});
</script>

<style lang="scss" scoped>
.el-form>* {
  display: inline-flex;
  vertical-align: middle;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
    margin-right: 24px;
  }
}

.end-time {
  :deep(label) {
    width: 0px !important;
    margin-right: 5px;
  }
}
</style>
